/*  header-comment
/*  file   : /Users/allan/Desktop/workSpace/react-hrm-h5/src/modules/steps/header
/*  author : arida
/*  date   : 2017-6-4 18:27:20
/*  last   : 2017-10-2 11:13:32
*/
import React from "react";
import PropTypes from "prop-types";
import { mid2Url } from "@ali/ding-mediaid";

import { getImageByFileKey } from "../../utils/common.js";
import { get } from "../../utils/db.js";
// style
import "./header.less";

/**
 * 图标组件，使用css实现，而不是svg
 */
const defaultLogo =
  "https://gw.alicdn.com/tfs/TB1XZW8mgoQMeJjy0FpXXcTxpXa-180-180.png";
const defaultBackground =
  "https://gw.alicdn.com/tfs/TB1OG_5dm_I8KJjy0FoXXaFnVXa-1125-213.png";

const Header = ({ logo, companyName, background, isEnjoin , isNew}) => {
  return (
    <div
      className="steps-header"
      style={{
        background:"linear-gradient(360deg, #197DFF 0%, #4BA2FA 100%)"
      }}
    >
    <div style={{
        backgroundImage: `url(${background
          ? getImageByFileKey(get("baseUrl"), background)
          : defaultBackground})`,
        backgroundSize: "100% auto",
        backgroundRepeat:"no-repeat",
        backgroundPosition:"left bottom"
      }}>
      <div className="table top">
        <div className="table-cell fl">
            <div className="welcome">{isNew ? "欢迎加入" : "请更新个人档案"}</div>  
            <div className="steps-header-company">
              <span>{companyName}</span>
              {/* <div>{isEnjoin ? "欢迎你的加入！" : ""}</div>   */}
            </div>
        </div>
        <div class="table-cell fr">
          <img
            className="steps-header-logo"
            src={mid2Url(logo || "", { imageSize: "thumb" }) || defaultLogo}
          />
        </div>  
      </div>
    </div>
    </div>
  );
};
Header.defaultProps = {
  type: ""
};
Header.propTypes = {
  isEnjoin: PropTypes.bool,
  logo: PropTypes.string,
  companyName: PropTypes.string,
  background: PropTypes.string
};
module.exports = Header;
